<template>
  <div class="" />
</template>

<script>
export default {
  name: 'MyComponent',
  props: { },
  data () {
    return { }
  },
  computed: { },
  created () { },
  mounted () { },
  methods: {
    /*
    http报文结构：起始行：方法路径加http版本，也叫状态行，由http版本，状态码和原因三部分组成
    ，头部：展示一下请求头和响应头在报文中的位置，
    空行用来区分头部和实体，
    实体 具体的数据也就是body部分，请求报文对应请求体响应报文对应响应体
    请求方式：GET向指定的资源发出显示请求，使用GET方法应该只用在读取数据，而不应当被用于产生副作用的操作中，例如在Web Application其中一个原因是GET可能会被网络蜘蛛等随意访问
    HEAD与GET方法一样，都是向服务器发出指定资源的请求，只不过服务器不传回资源的本文部分，它的好处在于使用这个方法可以在不必传输内容的情况下，就可以获取其中关于该资源的信息（元信息和元数据）
    POST 向指定资源提交数据，请求服务器进行处理（例如提交表单或者上传文件），数据被包含在请求文本中，这个请求可能会创新的资源或修改现有资源，或二者皆有
    PUT 向指定资源位置上传其最新内容
    DELETE 请求服务器删除Request-URL所标识的资源
    TRACE 回显服务器收到的请求，主要用于测试或诊断
    OPTIONS这个方法可使服务器所支持的所有HTTP请求方法用来代替资源名称，向Web服务器发送OPTIONS请求，可以测试服务器功能是否正常运作
    CONNECT HTTP/1.1xiey中预留给能够连接改为管道方式的代理服务器，通常用于SSL加密服务器的链接，（经由非加密的HTTP代理服务器）
    1xx消息 ---请求已被服务器接收，继续处理
    2xx成功 -- 请求以成功被服务器接收，理解并接受
    3xx重定向 -- 需要后续操作才到完成这一请求
    4xx请求错误 --请求含有词法错误或者无法被执行
    5xx服务器错误 --服务器在处理某个正确请求时发生错误
    */
    /*
    一、关于使用let和const规则
    使用let声明的变量可以重新赋值，但是不能在同一作用域内重新声明
    使用const声明的变量必须赋值初始化，但是不能在同一作用域类重新声明也无法重新赋值
      */
    tableData () {
      const a = '1'
      // let a = '2'
      // Syntax Error: C:\Users\user\Desktop\最近要写的项目\wangzi\src\views\mianshi\es6.vue: Identifier 'a' has already been declared. (25:10)
      // 语法错误，已声明标识符a
      console.log(a)
      const b = 10
      console.log(b)
      // const b;
      // Syntax Error: C:\Users\user\Desktop\最近要写的项目\wangzi\src\views\mianshi\es6.vue: 'Const declarations' require an initialization value. (29:13)
      // 语法错误Const声明需要初始化值
    },
    /*
      二、模板字符串
      模板字面量本质上是包含嵌入式表达式的字符串字面量.
    */
    StringNumber () {
      const student = {
        name: 'Richard Kalehoff',
        guardian: 'Mr. Kalehoff'
      }

      const teacher = {
        name: 'Mrs. Wilson',
        room: 'N231'
      }
      const msg = `${student.name} ${student.guardian} ${teacher.name} ${teacher.room}`
      console.log(msg)
    },
    /*
      三、解构赋值
      在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量
    */
    jiegou () {
      const point = [1, 2, 4]
      const [a, b, c] = point
      console.log(a, b, c)
      const gemstone = {
        type: 'quartz',
        color: 'rose',
        karat: 21.29
      }
      const { type, color, karat } = gemstone
      console.log(color, type, karat)
      const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

      for (const index of digits) {
        console.log(index)
      }
    },
    /*
      四、展开运算符
      展开运算符（用三个连续的点 (...) 表示）是 ES6 中的新概念，使你能够将字面量对象展开为多个元素
      使用展开运算符将数组展开为多个元素, 使用剩余参数可以将多个元素绑定到一个数组中.
      剩余参数也用三个连续的点 ( ... ) 表示，使你能够将不定数量的元素表示为数组.
    */
    zhankai () {
      const books = [
        'Don Quixote',
        'The Hobbit',
        'Alice in Wonderland',
        'Tale of Two Cities'
      ]
      console.log(...books)
      const order = [20.17, 18.67, 1.5, 'cheese', 'eggs', 'milk', 'bread']
      const [total, subtotal, tax, ...items] = order
      console.log(total, subtotal, tax, items)
    },
    /* 五、箭头函数
      ES6之前,使用普通函数把其中每个名字转换为大写形式：
    */
    jiantou () {
      const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(function (name) {
        return name.toUpperCase()
      })
      const upperizedNames2 = ['Farrin', 'Kagure', 'Asser'].map((name) =>
        name.toUpperCase()
      )
      console.log(upperizedNames, upperizedNames2)
    }
  }
}
</script>

<style scoped lang='less'></style>
